<template>
  <div class="mycar">
      <div class="left_menu" @click="goToMine">
          <img src="@/assets/shop_car.png" alt="">
          <span class="menu_label">查看购物车</span>
      </div>
      <div class="left_menu" ref="btn" @click="backTop">
          <img src="@/assets/top.png" alt="">
          <span class="menu_label">返回顶部</span>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        isTop: true,
        timer: null,
    };
  },
  components: {},
  created () {
     this.needScroll();  
  },
  computed:{
      shopNum(){
          return this.$store.state.num || 0
      }
  },
  methods:{
      goToMine(){
          this.$router.push('/shopList')
      },
      needScroll() {
      let that = this;
      let clientHeight = document.documentElement.clientHeight / 2;
      let obtn = that.$refs.btn;
      window.onscroll = function() {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (!that.isTop) {
          clearInterval(that.timer);
        }
        that.isTop = false;
      };
    },
    backTop() {
      let self = this;
      self.timer = setInterval(function() {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        self.isTop = true;
        if (osTop === 0) {
          clearInterval(self.timer);
        }
      }, 30);
    }
  }
};
</script>
<style scoped>
.mycar{
    height: 160px;
    width: 80px;
    background: #efefef;
    position: fixed;
    right: 20px;
    bottom: 100px;
}
.left_menu{
    height: 80px;
    display: flex;
    align-items: center;
    transition: all 1s;
    user-select: none;
}
.left_menu:hover{
    background: #fff;
    cursor: pointer;
    transition: all 1s;
}
.left_menu:hover .menu_label{
    display: block;
    left: -150px;
    transition: all 0.5s;
    opacity: 1;
}
.num{
    color: #fff;
    background-color: #e62318;
    position: absolute;
    top: 16px;
    right: 15px;
    border-radius: 8px;
    text-align: center;
    padding: 0 4.5px;
    background: red;
    font:400 12px/16px 'microsoft yahei'
}
.menu_label{
    background: url("../assets/label.png");
    opacity: 0;
    width: 150px;
    height: 40px;
    font: 400 14px/40px 'microsoft yahei';
    color: #fff;
    text-align: center;
    position: absolute;
    left: -200px;
    background-size: 100% 100%;
}
.left_menu img{
    width: 30px ;
    margin: 0 auto;
}
</style>


